<template>
    <div class="quicktour_box">
        <div class="quicktour_header">
        <router-link tag="i" to="/introduction" class=" ">
            <i class="el-icon-arrow-left"></i>
        </router-link>
            <span>快速指南</span>   
        </div>     
        <div class="quicktour_content">
            <!-- @/assets/njrpic/service.png -->
            <mt-swipe :auto="0">
            <mt-swipe-item><img src="@/assets/yjpic/quicktour01.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour02.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour03.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour04.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour05.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour06.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour07.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour08.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour09.jpg" alt=""></mt-swipe-item>
            <mt-swipe-item><img src="@/assets/yjpic/quicktour10.jpg" alt=""></mt-swipe-item>
            </mt-swipe>
        </div>
    </div>
</template>
<script>
export default {
    
  }
</script>
<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
.quicktour_box{
    display:flex;
    flex-direction: column;
    background-color: #ffffff;
    height: 100vh;
.quicktour_header{
    background-color: #ffffff;
    display: flex;
    height: 5%;
    padding: 25px;
    align-items: center;
    border-bottom: 2px solid rgba(207, 202, 197, 0.959);
    i{
        font-size: xx-large;
    }
    span{
        font-size: 36px;
        display: block;
        width: 100%;
        text-align: center;
    }
}
.quicktour_content{
    display: flex;
    height: 95%;
    width: 100%;
/deep/.mint-swipe {
    width: 100%;
}

/deep/ .mint-swipe-indicators {
    bottom: 0.83333rem !important;
}

/deep/.mint-swipe-indicator {
    width: 0.24667rem !important;
    height: 0.24667rem !important;
    background: #000 !important;
    opacity: 0.6 !important;
    margin: 0 0.1rem !important;
}

/deep/.mint-swipe-indicator.is-active {
    background: #1b7de4 !important;
}
    img{
        width: 100%;
        height: 100%;
    }
    
}
}
</style>